<template>
  <div class="container">
    <van-cell center >
      <div slot="title" class="channel-title">我的频道</div>
      <van-button size="mini" type="danger" plain round @click="isEdit=!isEdit">{{!this.isEdit?'编辑':'完成'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
      :class="{active:index===active}"
      class="grid-item"
      :icon="(isEdit && index!=0)?'clear':''"
      v-for="(channel,index) in channels"
      :key="index"
      :text="channel.name"
      @click="userChannelClick(channel, index)"
       />
    </van-grid>
    <van-cell center :border="false">
      <div slot="title" class="channel-title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
       @click="onAdd(channel)"
       class="grid-item"
       v-for="(channel,index) in recommendChannels"
       :key="index"
       :text="channel.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel} from '../../api/user'
import { mapState } from 'vuex'
export default {
  name: "Test",
  created() {
    this.mayAllChannels()
  },
  data() {
    return {
      isEdit:false,
      allChannels: [] //所有频道数组集合
    };
  },
  props: {
    channels:{
      type:[Array,Object]
    },
    active:{
      type:Number
    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannels(){
      return this.allChannels.filter((channel)=>{
         return  !this.channels.find((c)=>{
            return channel.id === c.id
         })
      })
    }
  },
  methods: {
    async mayAllChannels(){
      const {data}=await getAllChannels()
      // console.log(data);
      this.allChannels=data.data.channels
    },
  async onAdd(channel){
    this.channels.push(channel)
    if(this.user){
        await addUserChannel({ channels: [{ id: channel.id, seq: this.channels.length }] })
    }else{
      window.localStorage.setItem('channels',this.channels)
    }
  },
  async userChannelClick(channel,index){
    // 编辑状态 删除 频道
    // 费编辑状态 去到对应的 频道
    if(this.isEdit&&index!==0){
      // 编辑状态
      // 如果是删除的active 前面的
      if(index<=this.active){
        this.$emit('updataActive',this.active-1)
      }
      this.channels.splice(index,1)
      // 数据持久化
        if (this.user) {
          await deleteUserChannel(channel.id)
        } else {
          setItem('channels', this.channels)
        }
    }else{
      this.$emit('showPopu')
      this.$emit('updataActive', index)
    }
  }
  },
};
</script>

<style lang="less" scoped>
.container{
  padding-top: 54px;
  .grid-item{
    width: 80px;
    height: 43px;
    /deep/.van-grid-item__content{
    background-color: #f4f5f6;
    .van-grid-item__text{
      font-size: 14px;
      margin-top: 0;
    }
  }
    /deep/ .van-grid-item__icon{
      position: absolute;
      right: -8px;
      top: -6px;
      font-size: 19px;
      color: #ccc;
    }
  }
  /deep/.active{
    .van-grid-item__text{
      color: tomato !important;
    }
  }
}
</style>
